<template>
	<view class="warp">
		<uni-nav-bar 
		  backgroundColor="#282536"
		   color="#fff" 
		   :border="false"
			:fixed="true"
		   @clickLeft="left"  left-icon="left" 
		   :statusBar="true"  
		    leftWidth="30rpx"
			right-text="购买记录"
			right-width="150rpx"
			@clickRight="rightBtn"
		   >
		   <view class="nav_title flex_row_between_center">
			   <view class="nav_title_l">读道会员</view>
		   </view>
		</uni-nav-bar>
		<view class="bg">
			<view class="vip_card">
				<view class="actover">
					 <image style="width: 110rpx;height: 110rpx; border-radius: 50%;" :src="userCenterData.memberAvatar" mode=""></image>
					 <span>{{userCenterData.memberMobile}}</span>
				</view>
				<view class="date_titem">
					<view v-if="userCenterData.yesOrNoPackage==false">未开通会员</view>
					<view v-else>vip有效期至 {{$changeTime(userCenterData.vendorId)}}</view>
					<!-- <view >vip有效期至 {{$changeTime("2024-06-01T15:53:14.000+08:00")}}</view> -->
				</view>
			</view>
		</view>
		<view class="cont_box">
			<view class="vip_renew">
				<view class="v_list">
					<view @click="changevip(index)"  :class="vipselectnumber==index?'v-active v_item':'v_item'" v-for="(item,index) in viplist" :key="index">
						<view class="top">{{item.type}}</view>
						<view class="now_money">
							<uni-icons v-if="vipselectnumber==index" color="#f8e2bb" fontFamily="CustomFont" :size="18">{{'\ue630'}}</uni-icons>
							<uni-icons v-else color="#e5e5e5" fontFamily="CustomFont" :size="18">{{'\ue630'}}</uni-icons>
							<span>{{item.now_money}}</span>
						</view>
						<view class="old_money" v-show="item.now_money!=item.old_money">
							<uni-icons color="#e5e5e5" fontFamily="CustomFont" :size="12">{{'\ue630'}}</uni-icons>
							<span>{{item.old_money}}</span>
						</view>
					</view>
				</view>
			</view>
			<!-- 自动续费 -->
			<view class="vip_lianxu">
				<view class="vip_1" v-if="vipselectnumber<3">
					<span>开通后，每</span>
					<span v-if="vipselectnumber==0">月</span>
					<span v-if="vipselectnumber==1">季</span>
					<span v-if="vipselectnumber==2">年</span>
					<span>按</span>
					<span>{{viplist[vipselectnumber].now_money}}</span>
					<span>元自动续费，可随时取消自动续费</span>
				</view>
				<view class="vip_2" v-if="vipselectnumber>2">
					<span v-if="vipselectnumber==3">选择  连续包月  ， 立省5元 </span>
					<span v-if="vipselectnumber==4">折合23.3元/月，选择   连续包季  ，立省4元 </span>
					<span v-if="vipselectnumber==5">折合17.3元/月，选择  连续包年   ，立省2.5元 </span>
				</view>
			</view>
			<!-- z支付按钮 -->
			<view class="paybutton">
				<view class="button_w button"  >
					<uni-icons color="#33d642" fontFamily="CustomFont" :size="24">{{'\ue62a'}}</uni-icons>
					<!-- <uni-icons style="margin-top: 8rpx;" color="#017bf2" fontFamily="CustomFont" :size="24">{{'\ue639'}}</uni-icons> -->
				     <span style="font-size: 36rpx;" @click="paycharge">确认协议并支付</span>
					 <view class="" style="margin-top: 4rpx;">
					 	<uni-icons color="#33d642" fontFamily="CustomFont" :size="16">{{'\ue630'}}</uni-icons>
					 	<span style="font-size: 38rpx;">{{viplist[vipselectnumber].now_money}}</span>
					 </view>
				</view>
				<!-- <view class="button_z button">
					<uni-icons style="margin-top: 8rpx;" color="#017bf2" fontFamily="CustomFont" :size="24">{{'\ue639'}}</uni-icons>
				     <span style="font-size: 36rpx;">确认协议并支付</span>
					 <view class="" style="margin-top: 4rpx;">
					 	<uni-icons color="#017bf2" fontFamily="CustomFont" :size="16">{{'\ue630'}}</uni-icons>
					 	<span style="font-size: 38rpx;">{{viplist[vipselectnumber].now_money}}</span>
					 </view>
				</view> -->
				<view class="bottom">
					<view class="left">
						<uni-icons color="#e5e5e5" @click="istrue=!istrue" v-if="!istrue" type="circle" size="16"></uni-icons>
						<uni-icons color="#e5e5e5" @click="istrue=!istrue" v-if="istrue" type="checkbox" size="16"></uni-icons>
					     <span>阅读并同意 <a href="" style="text-decoration: none;color: aqua;">《VIP会员服务协议》</a></span>
					</view>
					<view class="right">
						<span> <a href="" style="text-decoration: none;color: aqua;">立即反馈</a></span>
					</view>
				</view>
			</view>
		</view>
		<!-- 热门权益 -->
		<view class="power_box">
		      <view class="power_top">
		      	<!-- 热门权益 -->
		      	<view class="hot_power">
		      		<view class="h_top">热门权益</view>
		      		<view class="htop_items">
		      			<view class="left" @click="topagesfn('ai')">
		      				<uni-icons   color="#f2c4aa" fontFamily="CustomFont" :size="20">{{'\ue670'}}</uni-icons>
							<span>AI 智能工具</span>
		      			</view>
		      			<view class="right" @click="topagesfn('report')">
		      				<uni-icons color="#f2c4aa" fontFamily="CustomFont" :size="20">{{'\ue65c'}}</uni-icons>
		      			     <span>未来运势分析</span>
						</view>
		      		</view>
		      	</view>
		      	<view class="new_power">
		      		<view class="n_top">新权益</view>
		      		<view class="new_items">
		      			<view class="item" @click="topagesfn('report')">
							<uni-icons style="border: 2rpx solid #f2c4aa;border-radius: 50%;padding: 6rpx;" color="#f2c4aa" fontFamily="CustomFont" :size="20">{{'\ue74a'}}</uni-icons>
		      				<span>八字解读</span>
		      			</view>
		      			<view class="item" @click="topagesfn('syngamy')">
							<uni-icons style="border: 2rpx solid #f2c4aa;border-radius: 50%;padding: 6rpx;" color="#f2c4aa" fontFamily="CustomFont" :size="20">{{'\ue72e'}}</uni-icons>
		      				<span>合婚分析</span>
		      			</view>
		      			<!-- <view class="item">
							<uni-icons style="border: 2rpx solid #f2c4aa;border-radius: 50%;padding: 6rpx;" color="#f2c4aa" fontFamily="CustomFont" :size="20">{{'\ue656'}}</uni-icons>
		      				<span>免开屏广告</span>
		      			</view> -->
		      		</view>
		      	</view>
		      </view>
		</view>
		<!-- 全部权益 -->
		<view class="all_power">
			<view class="title">
				<span>全部权益</span>
			</view>
			<view class="power_list">
				<view class="item">
					<view class="left">
					<uni-icons color="#f2c4aa" fontFamily="CustomFont" :size="30">{{'\ue670'}}</uni-icons>
					</view>
					<view class="right" @click="topagesfn('ai')">
						<view class="top">AI 智能工具</view>
						<view class="bottom">每日可询问10次</view>
					</view>
				</view>
				<view class="item" @click="topagesfn('report')">
					<view class="left">
					<uni-icons color="#f2c4aa" fontFamily="CustomFont" :size="30">{{'\ue65c'}}</uni-icons>
					</view>
					<view class="right">
						<view class="top">未来运势分析</view>
						<view class="bottom">阶段性运势预测</view>
					</view>
				</view>
				<view class="item">
					<view class="left">
					<uni-icons color="#f2c4aa" fontFamily="CustomFont" :size="30">{{'\ue653'}}</uni-icons>
					</view>
					<view class="right" @click="topagesfn('report')">
						<view class="top">八字排盘工具</view>
						<view class="bottom">免费排盘</view>
					</view>
				</view>
				<view class="item" @click="topagesfn('wealth')">
					<view class="left">
					<uni-icons color="#f2c4aa" fontFamily="CustomFont" :size="30">{{'\ue78a'}}</uni-icons>
					</view>
					<view class="right">
						<view class="top">财富运势分析</view>
						<view class="bottom">预测财富运势</view>
					</view>
				</view>
				<view class="item" @click="topagesfn('report')">
					<view class="left">
					<uni-icons color="#f2c4aa" fontFamily="CustomFont" :size="30">{{'\ue64f'}}</uni-icons>
					</view>
					<view class="right">
						<view class="top">健康运势分析</view>
						<view class="bottom">预测健康情况</view>
					</view>
				</view>
				<view class="item" @click="topagesfn('marriage')">
					<view class="left">
					<uni-icons color="#f2c4aa" fontFamily="CustomFont" :size="30">{{'\ue72e'}}</uni-icons>
					</view>
					<view class="right">
						<view class="top">婚姻运势分析</view>
						<view class="bottom">预测婚姻运势</view>
					</view>
				</view>
				<view class="item" @click="topagesfn('numerology')">
					<view class="left">
					<uni-icons color="#f2c4aa" fontFamily="CustomFont" :size="30">{{'\ue65a'}}</uni-icons>
					</view>
					<view class="right">
						<view class="top">手机号测分</view>
						<view class="bottom">分析手机号影响</view>
					</view>
				</view>
				<view class="item" @click="topagesfn('nameevaluation')">
					<view class="left">
					<uni-icons color="#f2c4aa" fontFamily="CustomFont" :size="30">{{'\ue650'}}</uni-icons>
					</view>
					<view class="right">
						<view class="top">名字打分</view>
						<view class="bottom">名字影响</view>
					</view>
				</view>
				<view class="item" @click="topagesfn('nametable')">
					<view class="left">
					<uni-icons color="#f2c4aa" fontFamily="CustomFont" :size="30">{{'\ue64a'}}</uni-icons>
					</view>
					<view class="right">
						<view class="top">八字起名</view>
						<view class="bottom">结合八字起名</view>
					</view>
				</view>
				<view class="item" @click="topagesfn('constellation')">
					<view class="left">
					<uni-icons color="#f2c4aa" fontFamily="CustomFont" :size="30">{{'\ue6a2'}}</uni-icons>
					</view>
					<view class="right">
						<view class="top">星座运势分析</view>
						<view class="bottom">每日星座运势</view>
					</view>
				</view>
				<view class="item" @click="topagesfn('solartermslist')">
					<view class="left">
					<uni-icons color="#f2c4aa" fontFamily="CustomFont" :size="30">{{'\ue647'}}</uni-icons>
					</view>
					<view class="right">
						<view class="top">节气查询</view>
						<view class="bottom">查看24节气</view>
					</view>
				</view>
				<view class="item" @click="topagesfn('zhougong')">
					<view class="left">
					<uni-icons color="#f2c4aa" fontFamily="CustomFont" :size="30">{{'\ue658'}}</uni-icons>
					</view>
					<view class="right">
						<view class="top">周公解梦</view>
						<view class="bottom">梦境详解</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				viplist:[
					{type:'连续包月',now_money:25,old_money:30},
					{type:'连续包季',now_money:58,old_money:70},
					{type:'连续包年',now_money:178,old_money:208},
					{type:'1个月',now_money:30,old_money:30},
					{type:'3个月',now_money:70,old_money:90},
					{type:'12个月',now_money:208,old_money:360},
				],
				vipselectnumber:0,
				istrue:false,
				wxBrowerCode: '', //微信浏览器支付的code
				client: 'wxbrowser', //支付发起来源 pc==pc,mbrowser==移动设备浏览器,app==app,wxxcx==微信小程序,wxbrowser==微信内部浏览器
				rechargeSn: '',
				amount: 0.1,//金额
				selData: {
					payMethod:'wx',
					payType:'MINIAPP',
				},
				payMethod:[],
				 isClick: true,	
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		onLoad() {
			this.initClient()
		},
		methods:{
			...mapMutations(['login', 'setUserCenterData']),
			//初始化终端类型
			initClient() {
				//#ifdef APP-PLUS
				this.client = 'app'
				let value = {
						payMethod:'wx',
						payType:'APP',
						payMethodName:'微信支付',
						payIcon:'\ue62a',
						color:'#33d642',
					}
				this.payMethod.push(value)
				//#endif
				
				//#ifdef MP-WEIXIN
				this.client = 'wxxcx'
				let value = {
						payMethod:'wx',
						payType:'MINIAPP',
						payMethodName:'微信支付',
						payIcon:'\ue62a',
						color:'#33d642',
					}
				this.payMethod.push(value)
				//#endif
				this.selData = this.payMethod[0]
				this.amount=this.viplist[0].now_money
			},
			// 支付
			paycharge(){
				const {selData,
					rechargeSn,
					amount,
					wxBrowerCode,
					client
				} = this
				console.log('rechargeSn',rechargeSn);
				console.log('amount',amount);
				console.log('wxBrowerCode',wxBrowerCode);
				console.log('client',client);
				
				let _this = this
				if (!this.isClick) {
					return false
				}
				this.isClick = false
				// uni.showLoading()
				let param = {}
				param.method = 'POST'
				param.data = {}
				param.url='v3/member/front/levelRecharge/recharge'
				param.data.amount = amount 
				param.data.months = 1 
				param.data.payType = selData.payType
				param.data.payMethod = selData.payMethod
				
				
				
				if (client == 'wxxcx') {
					//微信小程序支付
					uni.login({
						success: (code) => {
							 
							param.data.code = code.code
							param.data.codeSource = 1 //用户code来源（JSAPI支付时必填）：1==小程序，2==微信内部浏览器
							this.$request(param)
								.then((res) => {
									console.log('res-weixin',res);
									if (res.state == 200) {
										uni.hideLoading()
										let tmp_data = res.data.payData
										if (res.data.actionType == null) {
											//微信小程序支付
											uni.requestPayment({
												timeStamp: tmp_data.timeStamp,
												nonceStr: tmp_data.nonceStr,
												package: tmp_data.packageValue,
												signType: 'MD5',
												paySign: tmp_data.paySign,
												success: function(res) {
													_this.payTip('success')
												},
												fail: function(res) {
													_this.payTip('fail')
												}
											})
										}
									} else {
										this.isClick = true
										// this.$api.msg(res.msg)
										uni.hideLoading()
									}
								})
								.catch((e) => {})
						}
					})
					return false
				}
				
				console.log('param',param);
				
				this.$request(param)
					.then((res) => {
						console.log('resresres',res);
						if (res.state == 200) {
							uni.hideLoading()
							let tmp_data = res.data.payData
							
							if (res.data.actionType == 'redirect') {
								window.location.href = tmp_data
							} else if (res.data.actionType == null) {
								 if(client == 'app') {
									//APP支付
									let provider = ''
									let orderInfo = {}
									if (selData.payMethod == 'wx') {
										provider = 'wxpay'
										orderInfo.appid = tmp_data.appId
										orderInfo.noncestr = tmp_data.nonceStr
										orderInfo.package = tmp_data.packageValue
										orderInfo.partnerid = tmp_data.partnerId
										orderInfo.prepayid = tmp_data.prepayId
										orderInfo.timestamp = tmp_data.timeStamp
										orderInfo.sign = tmp_data.sign
									} else if (selData.payMethod == 'alipay') {
										provider = 'alipay'
									}
									uni.requestPayment({
										provider: provider,
										orderInfo: provider == 'alipay' ? res.data.payData : orderInfo, //订单数据
										success: function(res) {
											_this.payTip('success')
										},
										fail: function(err) {
											_this.payTip('fail')
											_this.isClick = true
										}
									})
								}
							} else if (res.data.actionType == 'autopost') {
								document.write(res.data.payData)
							}
						} else {
							this.isClick = true
							// this.$api.msg(res.msg)
							uni.hideLoading()
						}
					})
					.catch((e) => {})
			},
			//支付操作完成提示
			payTip(type) {
				if (type == 'success') {
					this.isClick = true
					//提示充值成功，如果来自账户充值页面，直接跳转充值明细列表页面，否则返回上一级页面（充值详情页面），并更新数据	rechargeBalance:用户充值		rechargeDetail：充值详情
					this.$modal.msg('充值成功')
					this.getUserInfo()
					
							
				} else if (type == 'fail') {
					//提示充值失败 刷新界面
					this.$modal.msg('充值失败,请重试～')
					this.isClick = true
				}
			},
			getUserInfo(){
				this.$request({
						url: 'v3/member/front/member/memberInfo'
					}).then((result) => {
						this.setUserCenterData(result.data)
							
					})
			},
			rightBtn(){
				uni.navigateTo({
					url:"/pages/moreModule/myvip/viplist"
				})
			},
			changevip(val){
				this.vipselectnumber=val
				this.amount=this.viplist[val].now_money
			},
			topagesfn(val){
				 if(val=='ai'){
					 uni.reLaunch({
					 	url:'/pages/AI/index'
					 })
				 }else if(val=='report'){
					 uni.navigateTo({
					 	url:"/pages/index/report1"
					 })
				 }else if(val=='syngamy'){
					 uni.navigateTo({
					 	url:"/pages/moreModule/syngamy/syngamy"
					 })
				 }else if(val=='numerology'){
					 uni.navigateTo({
					 	url:"/pages/moreModule/numerology/numerology"
					 })
				 }else if(val=='wealth'){
					 uni.navigateTo({
					 	url:"/pages/moreModule/wealth"
					 })
				 }else if(val=='marriage'){
					 uni.navigateTo({
					 	url:"/pages/moreModule/marriage"
					 })
				 }else if(val=='nameevaluation'){
					 uni.navigateTo({
					 	url:"/pages/moreModule/nameevaluation/nameevaluation"
					 })
				 }else if(val=='constellation'){
					 uni.navigateTo({
					 	url:"/pages/moreModule/constellation"
					 })
				 }else if(val=='constellation'){
					 uni.navigateTo({
					 	url:"/pages/moreModule/constellation"
					 })
				 }else if(val=='nametable'){
					 uni.navigateTo({
					 	url:"/pages/moreModule/name/nametable"
					 })
				 }else if(val=='zhougong'){
					 uni.navigateTo({
					 	url:"/pages/moreModule/zhougong"
					 })
				 }
			},
			left(){
				uni.navigateBack({delta:1})
			},
		}
	}
</script>
<style>
	page{
		 background-color: rgba(47, 44, 51);
	}
</style>
<style lang="scss" scoped>
.warp{
	.bg{
		background: linear-gradient(to bottom, rgb(105, 99, 137) 30%,rgb(25, 21, 58), rgb(47, 44, 51));
		position: relative;
		padding: 0 20rpx 40rpx 0;
		.title_box{
			padding: 0 20rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				align-items: center;
				.left_text{
					font-size: 30rpx !important;
					margin-right: 10rpx;
					
				}
				.left_icon{
					width: 30rpx;
					height: 30rpx;
					text-align: center;
					line-height: 30rpx;
					border: 2rpx solid #323333;
					border-radius: 50%;
					
				}
				
			}
		}
		.vip_card{
			 width: 100%;
			 height: 250rpx;
			 background: url(../../../static/images/viped.png) ;
			 background-size: cover;
			 position: relative;
			 .actover{
				 display: flex;
				 align-items: center;
				 position: absolute;
				 top: 56rpx;
				 left: 30rpx;
				 span{
					 font-size: 38rpx;
					 margin-left: 20rpx;
					 letter-spacing: 2rpx;
				 }
			 }
			 .date_titem{
				 position: absolute;
				 bottom: 30rpx;
				 left: 25rpx;
			 }
		}
		 
	}
	 .cont_box{
		 color: #fff;
		 .vip_renew{
			 white-space: nowrap;
			 overflow: hidden;
			 padding: 20rpx;
			 .v_list{
				 overflow-x: scroll;
				 box-sizing: border-box;
				 overflow-y: hidden;
				 -webkit-overflow-scrolling: touch;
				 .v_item{
					  overflow-y: hidden;
					 display: inline-block;
					 width: 230rpx;
					 height: 230rpx;
					 margin-right: 20rpx;
					 background: linear-gradient(to bottom ,rgb(97, 87, 113),rgb(64, 60, 74));
				     border: 2rpx solid #cecece;
					 border-radius: 20rpx;
					  text-align: center;
					   padding: 20rpx 0;
					   color: #e5e5e5;
					   .top{
						   font-size: 28rpx;
						   letter-spacing: 4rpx;
					   }
					   .now_money{
						   padding: 16rpx 0;
						   font-size: 50rpx;
					   }
					   .old_money{
						   text-decoration: line-through;
					   }
				 }
				 .v-active{
					 border: 2rpx solid #f8e2bb;
					 .top,.now_money{
						 color: #f8e2bb;
					 }
				 }
			 }
		 }
		 //续费
		 .vip_lianxu{
			  padding:0 20rpx;
			  color: #bebebe;
			  font-size: 24rpx;
		 }
		 // 支付按钮
		 .paybutton{
			 padding: 20rpx 40rpx;
			  
			 .button{
				 padding: 20rpx 20%;
				 border-radius: 48rpx;
				display: flex;
				 align-items: center;
				justify-content: space-between;
				
				 
			 }
			 .button_w{
				 color: #33d642;
				  background-color: #e7f8e8;
				  margin-bottom: 40rpx;
			 }
			 .button_z{
				 color: #017bf2;
				  background-color: #d5eaff;
			 }
			 .bottom{
			 	margin-top: 20rpx;
			 	display: flex;
			 	justify-content: space-between;
			     font-size: 24rpx;
				 color:  #f8e2bb;
			 }
		 }
	 }
	 .power_box{
		 padding: 20rpx 40rpx;
		 .power_top{
			border: 2rpx solid;
			border-radius: 20rpx;
			border: 2rpx solid #cecece;
			padding: 20rpx;
			background-color: #3a373e;
			 .hot_power{
				
			 		.h_top{
						text-align: center;
						color: #f9cfbe;
						font-size: 32rpx;
						// font-weight: 550;
						 font-style: italic;
					}	
					 .htop_items{
						 
						 display: flex;
						 justify-content: space-between;
					     color: #e5e5e5;
						 padding: 30rpx 20rpx;
						 .left,.right{
							 padding: 20rpx 50rpx;
							 border-top: 2rpx solid #f9cfbe;
							 border-radius: 30rpx;
							 background-color: #464147;
							 display: flex;
							 align-items: center;
							 span{
								 margin-left: 6rpx;
							 }
						 }
					 }
			 			 
			 }
			 .new_power{
				 margin-top: 20rpx;
				 .n_top{
					 text-align: center;
					 color: #f9cfbe;
					 font-size: 32rpx;
					 // font-weight: 550;
					  font-style: italic;
				 }
				 .new_items{
					  color: #e5e5e5;
					 padding: 30rpx 40rpx;
					 display: flex;
					 justify-content: space-between;
					 .item{
						 text-align: center;
						 span{
							 display: block;
							 margin-top: 20rpx;
							 
						 }
					 }
				 }
			 }
		 }
		 
	 }
	 // 全部权益
	 .all_power{
		 padding: 20rpx 30rpx;
		 .title{
			 font-size: 36rpx;
			 color: #f9cfbe;
			 text-align: center;
			 font-style: italic;
		 }
		 .power_list{
			 padding: 20rpx 10rpx;
			 display: flex;
			 flex-wrap: wrap;
			 justify-content: space-between;
			 .item{
				 margin-top: 30rpx;
				 display: flex;
				align-items: center;
				padding: 10rpx 20rpx;
				background-color: #3b363c;
				border-radius: 20rpx;
				width: 46%;
				.right{
					margin-left: 10rpx;
					.top{
						font-size: 30rpx;
						color: #e5e5e5;
					}
					.bottom{
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #888888;
					}
				}
			 }
		 }
	 }
}

.nav_title{
	width: 650rpx;
	height: 88rpx;
	font-size: 30rpx;
	
}
</style>
